<script setup lang="ts">
import { ref } from 'vue'
import { BoxContainer, type ColBoxContainer } from "@/models/containers";
import Dynamic from "@/components/Dynamic.vue";


const props = defineProps<{ model: ColBoxContainer }>()
const children = props.model.children as BoxContainer[]

const gridColFrs = props.model.spec.map(v => `${v}fr`).join(' ')



</script>

<template>
    <div class="col-box" :data-tag="model.tag">
        <Dynamic :component="cp" v-for="cp in children"></Dynamic>
    </div>
</template>

<style scoped lang="less">
.col-box {
    display: grid;
    grid-template-columns: v-bind(gridColFrs);
    gap: 0.8rem;
}
</style>